<!--
 * @Descripttion: 筛选管理
 * @Author: xiao li
 * @Date: 2020-09-28 15:24:24
 * @LastEditors: xiao li
 * @LastEditTime: 2021-11-19 18:22:39
-->

<template>
  <div class="lb-goods-edit">
    <top-nav :title="navTitle" :isBack="true"></top-nav>
    <div class="page-main">
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="地区" name="area">
          <div style="height: 40px"></div>
          <lb-button
            size="medium"
            type="primary"
            icon="el-icon-plus"
            @click="toShowDialog('area')"
            >新增{{ dialogTitle[activeName] }}</lb-button
          >
          <div class="space-lg"></div>
          <el-row class="page-search-form">
            <el-form
              @submit.native.prevent
              :inline="true"
              :model="searchForm.area"
              ref="areaForm"
            >
              <el-form-item label="输入查询" prop="title">
                <el-input
                  v-model="searchForm.area.title"
                  placeholder="请输入地区名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <lb-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  style="margin-right: 5px"
                  @click="getTableDataList(1, 'area')"
                  >{{ $t('action.search') }}</lb-button
                >
                <lb-button
                  size="medium"
                  icon="el-icon-refresh-left"
                  @click="resetForm('area')"
                  >{{ $t('action.reset') }}</lb-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            v-loading="loading.area"
            :data="tableData.area"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="title" label="地区名称"> </el-table-column>
            <el-table-column prop="status" label="是否上架">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateItem(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="top" label="排序值"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template slot-scope="scope">
                <div>{{ scope.row.create_time | handleTime(1) }}</div>
                <div>{{ scope.row.create_time | handleTime(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" width="160px" label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    size="mini"
                    plain
                    type="primary"
                    @click="toShowDialog('area', scope.row)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    size="mini"
                    plain
                    type="danger"
                    @click="confirmDel(scope.row.id, 'area')"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <lb-page
            :batch="false"
            :page="searchForm.area.page"
            :pageSize="searchForm.area.limit"
            :total="total.area"
            @handleSizeChange="handleSizeChange($event, 'area')"
            @handleCurrentChange="handleCurrentChange($event, 'area')"
          >
          </lb-page>
        </el-tab-pane>
        <el-tab-pane label="分类" name="star">
          <div style="height: 40px"></div>
          <lb-button
            size="medium"
            type="primary"
            icon="el-icon-plus"
            @click="toShowDialog('star')"
            >新增{{ dialogTitle[activeName] }}</lb-button
          >
          <div class="space-lg"></div>
          <el-row class="page-search-form">
            <el-form
              @submit.native.prevent
              :inline="true"
              :model="searchForm.star"
              ref="starForm"
            >
              <el-form-item label="输入查询" prop="title">
                <el-input
                  v-model="searchForm.star.title"
                  placeholder="请输入分类名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <lb-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  style="margin-right: 5px"
                  @click="getTableDataList(1, 'star')"
                  >{{ $t('action.search') }}</lb-button
                >
                <lb-button
                  size="medium"
                  icon="el-icon-refresh-left"
                  @click="resetForm('star')"
                  >{{ $t('action.reset') }}</lb-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            v-loading="loading.star"
            :data="tableData.star"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="title" label="分类名称"> </el-table-column>
            <el-table-column prop="status" label="是否上架">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateItem(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="top" label="排序值"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template slot-scope="scope">
                <div>{{ scope.row.create_time | handleTime(1) }}</div>
                <div>{{ scope.row.create_time | handleTime(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" width="160px" label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    size="mini"
                    plain
                    type="primary"
                    @click="toShowDialog('star', scope.row)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    size="mini"
                    plain
                    type="danger"
                    @click="confirmDel(scope.row.id, 'star')"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <lb-page
            :batch="false"
            :page="searchForm.star.page"
            :pageSize="searchForm.star.limit"
            :total="total.star"
            @handleSizeChange="handleSizeChange($event, 'star')"
            @handleCurrentChange="handleCurrentChange($event, 'star')"
          >
          </lb-page>
        </el-tab-pane>
        <el-tab-pane label="职业" name="job">
          <div style="height: 40px"></div>
          <lb-button
            size="medium"
            type="primary"
            icon="el-icon-plus"
            @click="toShowDialog('job')"
            >新增{{ dialogTitle[activeName] }}</lb-button
          >
          <div class="space-lg"></div>
          <el-row class="page-search-form">
            <el-form
              @submit.native.prevent
              :inline="true"
              :model="searchForm.job"
              ref="jobForm"
            >
              <el-form-item label="输入查询" prop="title">
                <el-input
                  v-model="searchForm.job.title"
                  placeholder="请输入职业名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <lb-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  style="margin-right: 5px"
                  @click="getTableDataList(1, 'job')"
                  >{{ $t('action.search') }}</lb-button
                >
                <lb-button
                  size="medium"
                  icon="el-icon-refresh-left"
                  @click="resetForm('job')"
                  >{{ $t('action.reset') }}</lb-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            v-loading="loading.job"
            :data="tableData.job"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="title" label="职业名称"> </el-table-column>
            <el-table-column prop="status" label="是否上架">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateItem(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="top" label="排序值"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template slot-scope="scope">
                <div>{{ scope.row.create_time | handleTime(1) }}</div>
                <div>{{ scope.row.create_time | handleTime(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" width="160px" label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    size="mini"
                    plain
                    type="primary"
                    @click="toShowDialog('job', scope.row)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    size="mini"
                    plain
                    type="danger"
                    @click="confirmDel(scope.row.id, 'job')"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <lb-page
            :batch="false"
            :page="searchForm.job.page"
            :pageSize="searchForm.job.limit"
            :total="total.job"
            @handleSizeChange="handleSizeChange($event, 'job')"
            @handleCurrentChange="handleCurrentChange($event, 'job')"
          >
          </lb-page>
        </el-tab-pane>
        <el-tab-pane label="年龄" name="age">
          <div style="height: 40px"></div>
          <lb-button
            size="medium"
            type="primary"
            icon="el-icon-plus"
            @click="toShowDialog('age')"
            >新增{{ dialogTitle[activeName] }}</lb-button
          >
          <div class="space-lg"></div>
          <el-row class="page-search-form">
            <el-form
              @submit.native.prevent
              :inline="true"
              :model="searchForm.age"
              ref="ageForm"
            >
              <el-form-item label="输入查询" prop="title">
                <el-input
                  v-model="searchForm.age.title"
                  placeholder="请输入年龄名称"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <lb-button
                  size="medium"
                  type="primary"
                  icon="el-icon-search"
                  style="margin-right: 5px"
                  @click="getTableDataList(1, 'age')"
                  >{{ $t('action.search') }}</lb-button
                >
                <lb-button
                  size="medium"
                  icon="el-icon-refresh-left"
                  @click="resetForm('age')"
                  >{{ $t('action.reset') }}</lb-button
                >
              </el-form-item>
            </el-form>
          </el-row>
          <el-table
            v-loading="loading.age"
            :data="tableData.age"
            :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
            tooltip-effect="dark"
            style="width: 100%"
          >
            <el-table-column prop="title" label="年龄名称"> </el-table-column>
            <el-table-column prop="status" label="是否上架">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  @change="updateItem(scope.row.id, scope.row.status)"
                >
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column prop="top" label="排序值"> </el-table-column>
            <el-table-column prop="create_time" label="创建时间">
              <template slot-scope="scope">
                <div>{{ scope.row.create_time | handleTime(1) }}</div>
                <div>{{ scope.row.create_time | handleTime(2) }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="status" width="160px" label="操作">
              <template slot-scope="scope">
                <div class="table-operate">
                  <lb-button
                    size="mini"
                    plain
                    type="primary"
                    @click="toShowDialog('age', scope.row)"
                    >{{ $t('action.edit') }}</lb-button
                  >
                  <lb-button
                    size="mini"
                    plain
                    type="danger"
                    @click="confirmDel(scope.row.id, 'age')"
                    >{{ $t('action.delete') }}</lb-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
          <lb-page
            :batch="false"
            :page="searchForm.age.page"
            :pageSize="searchForm.age.limit"
            :total="total.age"
            @handleSizeChange="handleSizeChange($event, 'age')"
            @handleCurrentChange="handleCurrentChange($event, 'age')"
          >
          </lb-page>
        </el-tab-pane>
      </el-tabs>
    </div>

    <el-dialog
      :title="
        dialogForm.id
          ? `编辑${dialogTitle[activeName]}`
          : `新增${dialogTitle[activeName]}`
      "
      :visible.sync="showDialog"
      width="500px"
      center
      class="dialogForm"
    >
      <el-form
        @submit.native.prevent
        :model="dialogForm"
        :rules="dialogFormRules"
        ref="dialogForm"
        label-width="100px"
      >
        <el-form-item :label="`${dialogTitle[activeName]}名称`" prop="title">
          <el-input
            v-model="dialogForm.title"
            placeholder="请输入名称"
            maxlength="20"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="排序值" prop="top">
          <el-input-number
            class="lb-input-number"
            v-model="dialogForm.top"
            :controls="false"
            :precision="0"
            :min="0"
            placeholder="请输入排序值"
          ></el-input-number>
          <lb-tool-tips>值越大, 排序越靠前</lb-tool-tips>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog = false">{{
          $t('action.cancel')
        }}</el-button>
        <el-button type="primary" @click="submitInfo">{{
          $t('action.comfirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data () {
    return {
      navTitle: '',
      activeName: 'area',
      modular_id: 0,
      searchForm: {
        area: {
          page: 1,
          limit: 10,
          title: '',
          modular_id: 0,
          type: 1
        },
        star: {
          page: 1,
          limit: 10,
          title: '',
          modular_id: 0,
          type: 2
        },
        job: {
          page: 1,
          limit: 10,
          title: '',
          modular_id: 0,
          type: 3
        },
        age: {
          page: 1,
          limit: 10,
          title: '',
          modular_id: 0,
          type: 4
        }
      },
      total: {
        area: 0,
        star: 0,
        job: 0,
        age: 0
      },
      loading: {
        area: false,
        star: false,
        job: false,
        age: false
      },
      tableData: {
        area: [],
        star: [],
        job: [],
        age: []
      },
      dialogTitle: {
        'area': '地区',
        'star': '分类',
        'job': '职业',
        'age': '年龄'
      },
      methodModel: {
        'area': 'payclassGoodsSelect',
        'star': 'payclassGoodsSelect',
        'job': 'payclassGoodsSelect',
        'age': 'payclassGoodsSelect'
      },
      showDialog: false,
      dialogForm: {
        id: 0,
        modular_id: 0,
        title: '',
        top: 0
      },
      dialogFormRules: {
        title: { required: true, type: 'string', message: '请输入名称', trigger: 'blur' },
        top: { required: true, type: 'number', message: '请输入排序值', trigger: 'blur' }
      }
    }
  },
  async activated () {
    let { modular_id: mid } = this.$route.query
    this.modular_id = mid
    await this.getTableDataList(1, this.activeName)
  },
  methods: {
    toShowDialog (key, item = { id: 0, title: '', top: 0 }) {
      this.showDialog = key
      for (let key in item) {
        this.dialogForm[key] = item[key]
      }
    },
    handleSizeChange (val, key) {
      this.searchForm[key].limit = val
      this.handleCurrentChange(1, key)
    },
    handleCurrentChange (val, key) {
      this.searchForm[key].page = val
      this.getTableDataList('', key)
    },
    /**
     * @method: 获取列表：关联商品/视频列表
     */
    async getTableDataList (flag, key) {
      if (flag) this.searchForm[key].page = 1
      this.loading[key] = true
      let searchForm = this.searchForm[key]
      searchForm.modular_id = this.modular_id
      let { code, data } = await this.$api.websiteStarChooseList(searchForm)
      this.loading[key] = false
      if (code !== 200) return
      this.tableData[key] = data.data
      this.total[key] = data.total
    },
    handleClick (e) {
      this.searchForm[e.name].page = 1
      this.getTableDataList(1, e.name)
    },
    /**
     * @method: 重置表单
     */
    resetForm (form) {
      let name = `${form}Form`
      this.$refs[name].resetFields()
      this.getTableDataList(1, form)
    },
    /**
     * @method 提交课程信息
     */
    async submitInfo () {
      let title = JSON.parse(JSON.stringify(this.dialogForm.title)).replace(/^\s+|\s+$/g, '')
      this.dialogForm.title = title
      let param = JSON.parse(JSON.stringify(this.dialogForm))
      let formArr = ['dialogForm']
      let flag = true
      for (let i = 0, len = formArr.length; i < len; i++) {
        this.$refs[formArr[i]].validate(valid => {
          if (!valid) {
            flag = false
            return false
          }
        })
      }
      if (flag) {
        let curr = this.activeName
        param.modular_id = this.modular_id
        param.type = this.searchForm[curr].type
        let methodModel = param.id ? 'websiteStarChooseUpdate' : 'websiteStarChooseAdd'
        let { code } = await this.$api[methodModel](param)
        if (code !== 200) return
        this.$message.success(this.$t(param.id ? 'tips.successRev' : 'tips.successSub'))
        this.showDialog = false
        this.getTableDataList(1, curr)
      }
    },
    // 上下架、删除
    updateItem (id, status, key) {
      this.$api.websiteStarChooseUpdate({ id, status }).then(res => {
        if (res.code === 200) {
          this.$message.success(this.$t(status === -1 ? 'tips.successDel' : 'tips.successOper'))
          if (status === -1) {
            this.searchForm[key].page = this.searchForm[key].page < Math.ceil((this.total[key] - 1) / this.searchForm[key].limit) ? this.searchForm[key].page : Math.ceil((this.total[key] - 1) / this.searchForm[key].limit)
            this.getTableDataList(1, key)
          }
        } else {
          if (status === -1) return
          this.getTableDataList(1, key)
        }
      })
    },
    // 删除
    confirmDel (id, key) {
      this.$confirm(this.$t('tips.confirmDelete'), this.$t('tips.reminder'), {
        confirmButtonText: this.$t('action.comfirm'),
        cancelButtonText: this.$t('action.cancel'),
        type: 'warning'
      }).then(() => {
        this.updateItem(id, -1, key)
      })
    }
  },
  filters: {
    handleTime (val, type) {
      let time = type === 1 ? moment(val * 1000).format('YYYY-MM-DD') : type === 2 ? moment(val * 1000).format('HH:mm:ss') : moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')
      return time
    }
  }
}
</script>

<style lang="scss" scoped>
.el-input,
.el-input-number {
  width: 200px;
}
.dialogForm {
  .el-input,
  .el-input-number {
    width: 300px;
  }
}
</style>
